<template>
  <div id="app">
    <!-- 使用路由器视图来渲染路由对应的组件 -->
    <router-view v-slot="{ Component, route }">
      <!-- 如果路由元信息中指定保持活力，则使用<keep-alive> -->
      <keep-alive>
        <component :is="Component" :key="route.path" v-if="route.meta.keepAlive" />
      </keep-alive>
      <!-- 否则直接渲染组件 -->
      <component :is="Component" :key="route.path" v-if="!route.meta.keepAlive" />
    </router-view>
  </div>

</template>

<style scoped lang="less">
#app {
  font-size: 16px;
}
</style>